<!--
  ~ Copyright (c) 2019. Supefun<supefun@163.com> All rights reserved.
  -->

<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Amaze UI</title>
    <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css">
</head>
<body>
<div id="app" align="center">
    <div v-if="showList">
        <table border="1" class="basic-table">
            <tr v-for="(poetry, rindex) in poetryList" :key="rindex">
                <td>
                    <a href="javascript:void(0)" @click="displayPoetry(poetry.id)">
                        {{ poetry.id }}. {{ poetry.title }}
                    </a>
                </td>
            </tr>
        </table>
    </div>
    <div v-else>
        <h1>{{ currentPoetry.title }}</h1>
        <h4>{{ currentPoetry.author.join(" ") }}</h4>
        <p><a href="javascript:void(0)" @click="displayList()">返回</a></p>
        <table border="1" class="basic-table">
            <tr v-for="(row, rindex) in currentPuzzle" :key="rindex">
                <td height="120" width="120" align="center" v-for="(col, cindex) in row" :key="cindex">
                    <font size="+3">{{ col }}</font>
                </td>
            </tr>
        </table>
    </div>
</div>

<!--在这里编写你的代码-->
<script src="http://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="{:url('json')}"></script>
<script>
    /**
     * 按照特定方式将字符串分隔为数组
     * @param str
     * @param split 数组段或者1为按单字分隔
     */
    function splitString (str, split) {
        if(split === 1){
            return str.split("");
        }else {
            let from = 0;
            let arr = [];
            split.forEach(function (idx) {
                arr.push(str.substr(from, idx));
                from += idx;
            });

            return arr;
        }
    }

    function chunkArr(arr, size) {
        var data = [];
        for(var i=0;i<arr.length;i=i+size){
            data.push(arr.slice(i,i+size));
        }
        return data;
    }

    /**
     * 将数组打乱
     */
    function shuffleArr (arr) {
        arr = arr.slice();
        let len = arr.length;
        let temp, random_index;
        while (len !== 0) {
            random_index = Math.round((len - 1) * Math.random());
            temp = arr[random_index];
            arr[random_index] = arr[len - 1];
            arr[len - 1] = temp;
            --len;
        }
        return arr;
    }

    function Poetry(poetry) {
        this.id = poetry.title || null;
        this.title = poetry.title || "";
        this.author = poetry.author || [];
        this.content = poetry.content || "";
        this.puzzles = poetry.puzzles || [{split:1, cols:5}];
        this.sentence = this.content.substr(0, this.content.length - 1).split(/[，。？]/);
    }

    Poetry.prototype.returnPuzzle = function (split, cols) {
        let arr = [];
        this.sentence.forEach(function(line){
            arr = arr.concat(splitString(line, split))
        });

        return chunkArr(shuffleArr(arr), cols)
    };

    Poetry.prototype.makePuzzle = function(idx) {
        let puzzle = this.puzzles[idx] || this.puzzles[0];
        return this.returnPuzzle(puzzle.split, puzzle.cols);
    };
</script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            showList: true,
            currentPoetry: null,
            currentPuzzle: null,
            poetryList : null
        },
        methods: {
            displayList: function(){
                this.showList = true;
            },
            displayPoetry: function(id){
                this.showList = false;
                this.currentPoetry = new Poetry(data[id]);
                this.currentPuzzle = this.currentPoetry.makePuzzle(1);
            }
        },
        created: function () {
            this.poetryList = data;
            // this.displayPoetry(0);
        }
    });
</script>
</body>
</html>
